<page-header [title]="'选择数据库表'" autoBreadcrumb="false" />
<nz-card [nzBordered]="false">
  <div nzLayout="inline" se-container>
    <se label="数据源" labelWidth="0">
      <nz-cascader style="width: 150px" [nzOptions]="dbSourceOptions" [(ngModel)]="dbSources" (ngModelChange)="onCascaderChanges($event)" />
    </se>

    <nz-select
      style="width: 250px"
      nzPlaceHolder="选择表名"
      [nzDropdownMatchSelectWidth]="false"
      nzAllowClear
      nzShowSearch
      nzServerSearch
      [(ngModel)]="selectedTable"
      (nzOnSearch)="onTableSearch($event)"
    >
      <ng-container *ngFor="let o of optionList">
        <nz-option *ngIf="!isLoading" [nzValue]="o.tableName" [nzLabel]="o.tableName" />
      </ng-container>
      <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
        <i nz-icon nzType="loading" class="loading-icon"></i>
        Loading Data...
      </nz-option>
    </nz-select>
  </div>

  <div style="margin-top: 30px; margin-right: 40px; float: right">
    <button nz-button nzType="primary" (click)="submit()"> 确认 </button>
    <button nz-button class="ml-sm" (click)="close()">关闭</button>
  </div>
</nz-card>
